<template>
  <div class="app-container">
  <div class="ProductionDynamic">
    <!-- 头部 -->
    <div class="ProductionDynamicHeader">
      <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findData" />
    </div>

    <!-- 主体 -->
    <div class="ProductionDynamicMain">
      <el-card class="ProductionDynamicMainCard" shadow="always" :body-style="{ padding: '0' }">
        <div class="ProductionDynamicMainCardHeader">
          <h1 class="MainLeftCardH1">入库明细查询</h1>
          <Table :tableData="tableData" :tableHeader="tableHeader" :selection="false" :TableHeight="400" />
        </div>
        <div class="ProductionDynamicMainCardBottom">
          <div class="ProductionDynamicMainCardBottomLeft">
            <h1 class="MainLeftCardH1">指令明细</h1>
            <Table :tableData="tableData1" :tableHeader="tableHeader1" :selection="false" :TableHeight="170" />
          </div>
          <div class="ProductionDynamicMainCardBottomRight">
            <Table :tableData="tableData2" :tableHeader="tableHeader2" :selection="false" :TableHeight="60" />
            <div class="ProductionDynamicMainCardBottomRightBottom">
              <div class="ProductionDynamicMainCardBottomRightBottomLeft">
                <p class="timelineMainP">
                <h6 class="timelineMainH1">退货单号</h6>
                <el-input placeholder=" " class="timelineMainInput" />
                </p>
                <el-button class="ProductionDynamicMainCardBottomRightBottomLeftBtn" style="" type="warning"
                  size="small">打印退货单</el-button>

                <p class="timelineMainP">
                <h6 class="timelineMainH1">入库单号</h6>
                <el-input placeholder=" " class="timelineMainInput" />
                </p>
                <el-button class="ProductionDynamicMainCardBottomRightBottomLeftBtn" type="warning"
                  size="small">打印退货单</el-button>

              </div>
              <div class="ProductionDynamicMainCardBottomRightBottomRight">
                <el-button class="bg" type="primary" size="default" @click="">保存</el-button>
                <el-button type="primary" size="default" @click="">打印</el-button>
              </div>
            </div>
          </div>
        </div>
        <!-- card body -->
      </el-card>

    </div>
  </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'MateriaWarehousing'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import Find from '@/components/Find/index.vue'
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入型体',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入订购单号',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入送货单号',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料颜色',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料名称',
    inputValue: ''
  },
  {
    type: 'date',
    dateLabel: '入仓日期',
    dateValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入退货单号',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '厂商',
    selectLabel: '',
    selectOptions: [{
      optionKey: '1',
      optionValue: '111111',
      optionLabel: 'option1'
    },
    {
      optionKey: '2',
      optionValue: '222222',
      optionLabel: 'option2'
    },
    {
      optionKey: '3',
      optionValue: '333333',
      optionLabel: 'option3'
    }],
  },
  {
    type: 'select',
    selectValue: '分类',
    selectLabel: '',
    selectOptions: [{
      optionKey: '1',
      optionValue: '111111',
      optionLabel: 'option1'
    },
    {
      optionKey: '2',
      optionValue: '222222',
      optionLabel: 'option2'
    },
    {
      optionKey: '3',
      optionValue: '333333',
      optionLabel: 'option3'
    }],
  },
  {
    type: 'date',
    dateLabel: '退货日期',
    dateValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',bgColor:'#1890FF',
  },
  {
    type: 'button',
    checkboxLabel: '导出',
  },

])
const findData = (data: any) => {
  console.log(data)
}
// 表格数据
const tableData = [
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
    customer: 'jzy',
    checkboxArrange: true,
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },

]

const tableHeader = ref([
  {
    label: '指令',
    prop: 'customer',
    width: '71px',
  },
  {
    label: '送货日期',
    prop: 'instruction',
    width: '71px',
  },
  {
    label: '订购单号',
    prop: 'shape',
    width: '71px',
  },
  {
    label: '厂商名称',
    prop: 'shape',
    width: '71px',
  },
  {
    label: '型体',
    prop: 'shape',
    width: '71px',
  },
  {
    label: '材料颜色',
    prop: 'shape',
    width: '71px',
  },
  {
    label: '材料名称',
    prop: 'shape',
    width: '210px',
  },
  {
    label: '规格',
    prop: 'shape',
    width: '73px',
  },
  {
    label: '单位',
    prop: 'shape',
    width: '73px',
  },
  {
    label: '送货数量',
    prop: 'shape',
    width: '73px',
  },
  {
    label: '退货数量',
    prop: 'shape',
    width: '73px',
  },
  {
    label: '暂收数量',
    prop: 'shape',
    width: '73px',
  },
  {
    label: '合格数量',
    prop: 'shape',
    width: '73px',
  },
  {
    label: '入库单号',
    prop: 'shape',
    width: '100px',
  },
  {
    label: '公斤数',
    prop: 'shape',
    width: '71px',
  },
  {
    label: '类型',
    prop: 'shape',
    width: '71px',
  },
  {
    label: '仓管员',
    prop: 'shape',
    width: '71px',
  },
  {
    label: '单据检核',
    width: '71px',
    type: 'checkbox',
    prop: 'checkboxArrange',
  },
  {
    label: '单价检核',
    width: '71px',
    type: 'checkbox',
    prop: 'checkboxArrange',
  },
  {
    label: '对账检核',
    width: '71px',
    type: 'checkbox',
    prop: 'checkboxArrange',
  },
])

// 底部表格数据
const tableData1 = [
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
  },

]

const tableHeader1 = ref([
  {
    label: '指令',
    prop: 'customer',
    width: '70px',
  },
  {
    label: '请购数量',
    prop: 'instruction',
    width: '176px',
  },
  {
    label: '已购数量',
    prop: 'shape',
    width: '222px',
  },
  {
    label: '未收数量',
    prop: 'shape',
    width: '222px',
  },
])

// 底部表格数据
const tableData2 = [
  {
    date: '20230427',
    name: 'Tom',
    address: '12312',
  },
]

const tableHeader2 = ref([
  {
    label: '材料名称',
    prop: 'customer',
    width: '73px',
  },
  {
    label: '指令',
    prop: 'instruction',
    width: '73px',
  },
  {
    label: '型体',
    prop: 'shape',
    width: '73px',
  },
  {
    label: '外观合格否',
    width: '73px',
    prop: 'name',
    type: 'select',
  },
  {
    label: '外国不良原因',
    prop: 'shape',
    width: '73px',
  },
  {
    label: '入仓日期',
    prop: 'shape',
    width: '73px',
  },
  {
    label: '备注',
    prop: 'shape',
    width: '73px',
  },
  {
    label: '材料编码',
    prop: 'shape',
    width: '73px',
  },
  {
    label: '退货日期',
    prop: 'shape',
    width: '73px',
  },
])

</script>

<style lang="less" scoped>
// 主体样式
.ProductionDynamicMain {
  width: 100%;
  height: 670px;
  margin-top: 20px;

  .ProductionDynamicMainCard {
    width: 100%;
    height: 100%;
    box-shadow: none;
  }
}

// 主体头
.ProductionDynamicMainCardHeader {
  width: 98%;
  height: 420px;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
}

// 主体底
.ProductionDynamicMainCardBottom {
  width: 98%;
  height: 210px;
  margin: auto;
  display: flex;
  margin-top: 18px;

  .ProductionDynamicMainCardBottomLeft {
    width: 50%;
    height: 100%;
  }

  .ProductionDynamicMainCardBottomRight {
    width: 50%;
    height: 100%;
  }
}

.MainLeftCardH1 {
  font-size: 16px;
}

.ProductionDynamicMainCardBottomRightBottom {
  width: 100%;
  height: 150px;
  display: flex;

  .ProductionDynamicMainCardBottomRightBottomLeft {
    width: 50%;
    height: 100%;
    display: flex;
    margin-top: 45px;
  }

  .ProductionDynamicMainCardBottomRightBottomRight {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: right;
    margin-top: 120px;
  }
}

// input输入框的样式
.timelineMainInput {
  width: 73px;
  height: 25px;
}

.timelineMainH1 {
  width: 73px;
  text-align: center;
}

// 按钮样式
.ProductionDynamicMainCardBottomRightBottomLeftBtn {
  background-color: #F89027;
  margin: 15px 15px 0 15px;
}

.bg {
  background-color: #E7E7E7;
  border: 1px solid #E7E7E7;
  color: #000000;

}
</style>
